<template>
  <div class="login">

      <!-- <h2> {{$store.state.count}}</h2> -->
    <!--登录-->
<div class="dl-box row">
    <div class="container" style="height: 400px">
        <div class="row">
            <div class="col-md-8"></div>
            
                <div class="col-md-4  right-dl">
                    <div class="andro_auth-form text-center">
                        <h2 style="padding-top: 30px;margin-top: 0px;margin-bottom: 10px;">登录</h2>
                        <form method="post" style="padding: 7px 30px 0px 30px">
                            <div class="form-group ">
                                <p class="ts top top_j"><span class="caret top-sj x"></span>用户名为4—8个字符</p>
                                <input  id="yh" type="text" class="form-control" placeholder="用户名" name="username" v-model="login_name"  maxlength="8">
                                <i></i>
                                <span class="after">用户名格式不正确</span>
                            </div>
                            <div class="form-group ">
                                <p class="ts bottom "><span class="caret bottom-sj"></span>请输入6位密码 </p>
                                <input id="mm" type="password" class="form-control" placeholder="密码" name="password" v-model="login_pass"  maxlength="6">
                                <i></i>
                                <span class="after">密码格式不正确</span>
                            </div>
                            <button id="dl" type="submit" class="andro_btn-custom primary right-dl-but" @click="login_c">  <router-link :to="login_dd" class="nav-link" href="#">登录 </router-link> </button>
                            <a class="wanji" href="#">忘记密码</a>
                            <div class="row" style="padding-top: 30px">
                                <div class="col-md-4 hen"></div><span class="col-md-4" style="margin-top: -10px;font-size:16px">切换</span><div class="col-md-4 hen"></div></div>

                            <div class="form-group">
                                <input type="button" class="form-control fg red  " value=" 继续使用微信 " >
                            </div>
                            
                            <p class="left-dl-p">还没有帐号？ <router-link to="/zc" href="#">创建一个</router-link> </p>
                        </form>
                    </div>
               
            </div>
        </div>
    </div>
</div>
  </div>
</template> 
<style lang="less">
/* body{
            overflow-x: hidden;
        } */
        *{
        padding: 0;margin: 0;box-sizing: border-box;
    }
        
/*图片的样式*/
.left-dl{
    background-image: url("../../public/img/auth.jpg");
    background-size: 100%;
    padding: 0px;
}
.bj{
    background-color: black;
    opacity: 0.7;
    padding: 160px 0px 300px 20%;
    color: #FFFFFF;
}
.bj2{
    padding: 0px 0px 10px 20%;
}
.right-dl{
    background-color: #ffffff;
    height: 500px;
    margin-top: 10px;
}
.right-dl-but{
    background-color: #634832;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 30px;
    text-transform: uppercase;
    border-radius: 0;
    z-index: 1;
    box-shadow: 0 3px 24px rgba(0,0,0,.1);
    margin-top: 20px;
}

/*表单的样式*/
.left-dl-p{
    padding: 15px;
    font-size: 16px;
}
.hen{
    border-top: 1px solid  #dddddd;
    display: inline;
}
.fg{
    border: 0;
    margin-top: 20px;
    color: #FFFFFF;

    height: 40px;
}
.red{
    background-color: #cea461;
}
.blue{
    background-color: pink;
}
.wrapper{
    position: absolute;
    z-index: -1;
    max-width: 300px;
}
.img111{
    top: 150px;
    max-width: 400px;
    left: -200px;
}
.img14{
   bottom: -200px;
    right: 0px;
    max-width: 400px;

}
.dl-box{
    margin: 30px 0px -150px 0px;
    height: 670px;
    background:url(../../public/img/dlzc.jpg) no-repeat;
    margin-top: 20px;
    margin-bottom: -200px;
}
.wanji{
    display: block;
    margin-top: 25px;
    font-size:16px
}


/*提示的样式*/
.ts{
    position: absolute;
    background-color: #e1d5b4;
    color: #FFFFFF;
    height: 20px;
    line-height: 20px;

}
.top{
    top: 66px;
    left: 47px;
    padding-right: 15px;
    font-size: 16px;
     display: none;
}
.top_j{
    display: none;
}
.top-sj{
    position: relative;
    top: 14px;
    color: #e1d5b4;
    margin-left: 0;
    border-top: 10px dashed;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.bottom{
    top: 122px;
    left: 47px;
    padding-right: 15px;
    font-size: 16px;
     display: none;
}
.bottom-sj{
    position: relative;
    top: -20px;
    color: #e1d5b4;
    margin-left: 0;
    border-bottom: 10px dashed;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
}
.after{
    position: absolute;
    color:red;
    left: 41%;
    font-size: xx-small;
    /*默认不显示*/
    display: none;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
</style>
<script>
export default {
    data(){
        return{
      v_login:"",
      login_name:"", 
      login_pass:"",
      login_dd:""
        }
    
    },
    methods:{
        login_c(){
           this.$axios.post('http://47.114.130.21:3001/login','name1='+String(this.login_name)+ '&password1=' +String(this.login_pass)).
      then((data) =>{
        console.log(data);
        if(data.data.code1 =="200"){
          alert(data.data.msg1)
          console.log(data.data.key_id);
        localStorage.setItem("key", data.data.key_id)
        localStorage.setItem("username", this.login_name)
        this.$router.push("/")
        this.$router.go(0);
        }else if(data.data.code1=="404"){
          alert(data.data.msg1)
        }else if(data.data.code1=="400"){
          alert(data.data.msg1)
        }
      })
        }
    }
}
</script>